{% extends 'home/pub/base.html' %}

{% block zidingyi %}
<link rel="stylesheet" type="text/css" href="./static/home/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="./static/home/public/css/cart-app.css">
{% endblock %}


{% block mbx %}
<div class="navbar-left">
    <ol class="breadcrumb">
        <li>购物车</li>
        <li class="active">确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>
{% endblock %}


{% block content %}

<br><br><br><br>

<!-- 主内容区域 -->
<div class="mainbody cart">
        <div class="container">
            <!-- 购物车详情头 -->
            <table class="cart-header">
                <tbody>
                    <tr>
                        <td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
                            <div class="cart-select-all JSelectAll">
                                <div class="mz-checkbox"></div>
                                <span class="cart-select-title">全选</span></div>
                        </td>
                        <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
                        <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
                        <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
                        <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td></tr>
                </tbody>
            </table>
            <!-- 购物车详情头 E-->
            <!-- 购物清单信息列表 -->
            <div class="cart-merchant-list">
                <div class="cart-merchant">
                    <table class="cart-merchant-body">
                        <tbody>

                            <!--session数据开始-->
                            {% for i in request.session.cartdata.values  %}
                            <tr class="cart-product" id="pro5">
                                <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
                                    <div class="mz-checkbox " gid="{{ i.id }}" ></div>
                                    <a href="{% url 'goodsinfo' i.id %}" class="cart-product-link" target="_blank">
                                        <img src="{{ i.pic }}" class="cart-product-img" alt="{{ i.title }}"></a>
                                </td>
                                <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                                    <a href="{% url 'goodsinfo' i.id %}" class="cart-product-link" target="_blank">
                                        <p>{{ i.title }}</p></a>


                                </td>
                                <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                                    <p>
                                        <span class="cart-product-price">{{ i.price }}</span></p>
                                </td>
                                <td class="cart-col-number col-md-2 hidden-xs hidden-sm">

                                    <div class="cart-product-number-adder">
                                        <p class="cart-product-number-max show"></p>

                                         <!--给button父级元素加 cartnum 类方便查找,设置gid属性用来传值-->
                                        <div class="mz-adder cartnum" gid ="{{ i.id }}">
                                            <button class="mz-adder-subtract "></button>
                                            <div class="mz-adder-num">
                                                <input class="mz-adder-input" value="{{ i.num }}" type="text"></div>
                                            <button class="mz-adder-add"></button>
                                        </div>
                                    </div>
                                </td>

                                <!--运算-->
                                {% load page %}
                                <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                    <span class="cart-product-price total">
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">{% cheng i.num i.price %}</font></font>
                                    </span>
                                </td>
                                <td  class="cart-col-ctrl col-md-1 hidden-xs hidden-sm "  >
                                    <div  class="cart-product-remove" gid="{{ i.id }}">
                                        <span  class="glyphicon glyphicon-remove"></span>
                                    </div>
                                </td>
                            </tr>
                            <!--数据结束-->
                            {% endfor %}

                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 购物清单信息列表 E--></div>
        <!-- 结算详情 -->
        <div class="cart-footer" id="cartFooter">
            <div class="container">
                <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
                    <div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
                        <div class="mz-checkbox"></div>
                        <span class="cart-select-title">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">全选</font></font>
                        </span>
                    </div>
                    <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
                    <span class="cart-footer-count">共
                        {% load page %}
                        <span class="cart-footer-num" id="totalCount"></span>件商品</span>
                    <a href="{% url 'cartclear' %}" class="mz-btn btn-danger" >清空购物车</a>
                </div>
                <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
                    <span class="cart-footer-sum">

                        <span class="cart-footer-num red" id="totalDiscount">0.00</span>
                        <span class="cart-footer-text">元， 合计(不含运费)：</span>
                        <span class="cart-footer-total" id="totalPrice"></span>
                    </span>
                    <div class="mz-btn success" id="cartSubmit">去结算</div></div>
            </div>
        </div>
        <!-- 结算详情 E--></div>
<!-- 主内容区域 E-->

{% endblock %}


{% block js %}
<script type="text/javascript">
    //回顶部
    backTop();
    //全选
    allSelect();
    //商品数量加减
    cartAddMin();
    backTop();
    //顶部导航鼠标经过出现内容
    topNav();
    //登录图片鼠标经过
    topLogin();
    //
    leftNav();


   //购物车修改商品数量 给cartnum下的 button所有元素绑定单击事件. ajax
   $('.cartnum button').click(function(){
        gid = $(this).parents('.cartnum').attr('gid')
        num = $(this).parents('.cartnum').find('input').val()    //获取input输入框的值
        console.log(num)
        //发送ajas去后台修改session['cardata']的数据
        $.get('{% url "cartupdate" %}',{gid:gid,num:num},function(data){
            //location.href=location.href;
        })
   })

    //购物车删除操作 给删除的元素添加事件 发ajax删除
    $('.cart-product-remove').click(function(){
        console.log(111)
        //获取商品id即可
        gid = $('.cart-product-remove').attr('gid')
        console.log(2222)
        $.get('{% url 'cartdel' %}',{gid:gid},function(data){
            location.href=location.href
        })
    })


    // 给结算的div 绑定单击事件 传递已经选中的商品过去
    $('#cartSubmit').click(function(){
        // 返回选中的商品id的列表.  checked新增一个 gid属性.用来获取对应的gid
        ids = totalPrice()
        if(ids.length == 0){
            alert('请选择要购买的商品')
        }else{
            console.log(ids)
            location.href="/orderconfirm?ids="+ids.join(',')
        }
    })







</script>
{% endblock %}




